<template>
  <!-- 电子邮件设置 -->
  <div class="emailConfig">
    <p class="email_title">电子邮件设置</p>
    <div class="content-box">
      <div class="tree-box">
        <!-- <a-input-search style="margin-bottom: 5px; width: 200px" placeholder="请输入层级名称" @search="onSearch" /> -->
        <div class="tree">
          <a-tree
            v-if="treeData.length > 0"
            default-expand-all
            :defaultSelectedKeys="defaultSelectedKeys"
            :replaceFields="{ children: 'organizeList', title: 'name', key: 'id' }"
            @select="onSelect"
            :tree-data="treeData"
            show-icon
          >
            <a-icon slot="switcherIcon" type="down" />
            <span slot="smile" style="color: red">*</span>
            <span slot="meh" style="color: red">*</span>
          </a-tree>
        </div>
      </div>
      <div class="setting-box">
        <div class="email_content">
          <b class="name">功能开关：</b>
          <a-switch v-model="isOpen" @change="switchChange" checked-children="是" un-checked-children="否" />
          <span class="email_desc">注：打开本功能后，系统默认开启邮件通知</span>
        </div>
        <div class="email_content">
          <b class="name">邮箱：</b>
          <div class="input_box">
            <a-textarea
              :rows="4"
              v-model="config.email"
              placeholder="请输入邮箱，多个邮箱中间用英文格式“ , ”隔开"
              allow-clear
            />
          </div>
        </div>
        <div class="email_content">
          <a-button @click="saveEmail()" type="primary" style="margin-left: 130px"> 保存 </a-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getOrganizeTree } from '@api/api'
import { noEmail } from '../../utils/validate.js'
import { mapState } from 'vuex'
export default {
  data() {
    return {
      isOpen: false,
      treeData: [],
      defaultSelectedKeys: [], //arr 默认选中
      checkData: {}
    }
  },
  computed: {
    ...mapState['user']
  },
  computed: {
    config() {
      return this.checkData
    }
  },
  mounted() {
    getOrganizeTree({}).then(res => {
      console.log(res, 'ressssss')
      this.deepList(res.result, 'organizeList')
      this.mehList(res.result, this.$store.state.user.info)
      this.treeData = res.result
    })
  },
  methods: {
    noEmail,
    // 保存邮箱配置
    saveEmail() {
      const { email } = this.config

      if (email) {
        let isDou = email.indexOf('，') > -1

        let isE = email.split(',').some(noEmail)

        if (isDou) {
          this.$message.warning('多个邮箱中间请用英文格式“ , ”隔开')
          return
        }

        if (isE) {
          this.$message.warning('请检查邮箱是否输入有误！')
          return
        }
      }

      let params = {
        id: this.config.id,
        emailConfigSwitch: this.isOpen ? 0 : 1,
        email: this.config.email
      }
      this.$emit('submit', params)
    },

    // 处理数据
    mehList(arr, data) {
      if (!!arr) {
        arr.forEach(item => {
          data.code.split(',').forEach(item1 => {
            if (item.code == item1) {
              if (this.defaultSelectedKeys.length === 0) {
                this.defaultSelectedKeys.push(item.id)
                item['isOpen'] = item.emailConfigSwitch === 0
                this.checkData = item
                this.isOpen = item.emailConfigSwitch === 0
                console.log(this.checkData, 'checkData')
              }
              item['slots'] = { icon: 'meh' }
              item['disabled'] = false
              if (!!item.organizeList&&item.organizeList.length > 0) {
                item['disabled'] = false
                this.deepItem(item.organizeList)
              }
              return
            }
            this.mehList(item.organizeList, data)
          })
        })
      }
    },

    // 子集合启用
    deepItem(list) {
      list.forEach(item2 => {
        item2['slots'] = { icon: 'meh' }
        item2['disabled'] = false
        if (!!item2.organizeList && item2.organizeList.length > 0) {
          this.deepItem(item2.organizeList)
        }
      })
    },

    // 初始化数据
    deepList(arr, key) {
      arr.forEach(item => {
        item['disabled'] = true
        if (!!item[key] && item[key].length > 0) {
          this.deepList(item[key], key)
        }
      })
    },
    switchChange(sw) {
      this.checkData.emailConfigSwitch = sw ? 0 : 1
    },
    getTreeItem(list, selectedKeys) {
      list.forEach(item => {
        if (item.id === selectedKeys) {
          this.checkData = item
          item['isOpen'] = item.emailConfigSwitch === 0
          this.isOpen = item.emailConfigSwitch === 0
        } else {
          if (item.organizeList instanceof Array) {
            this.getTreeItem(item.organizeList, selectedKeys)
          }
        }
      })
    },
    // 点击层级名称触发
    onSelect(selectedKeys, info) {
      console.log('selected', selectedKeys, info)
      if (selectedKeys.length > 0) {
        this.getTreeItem(this.treeData, selectedKeys[0])
      }
    },
    onCheck(checkedKeys, info) {
      console.log('onCheck', checkedKeys, info)
    }
  }
}
</script>
<style lang="less" scoped>
.emailConfig {
  height: 80vh;
  border: 1px solid #ccc;
  .email_title {
    background: #d4d7de;
    font-weight: bold;
    font-size: 14px;
    padding: 7px 26px;
    margin-bottom: 10px;
  }
  .content-box {
    display: flex;
    .tree-box {
      margin-left: 5px;
      border: 1px solid #ccc;
      box-sizing: border-box;
      .tree {
        width: 200px;
        overflow: auto;
        max-height: 74vh;
      }
    }
    .setting-box {
      flex: 1;
      .email_content {
        display: flex;
        padding: 5px 10px 10px 5px;
        .name {
          //   color: #000;
          text-align: end;
          white-space: nowrap;
          margin-right: 10px;
          height: 100%;
          display: inline-block;
          width: 120px;
        }
        .email_desc {
          display: inline-block;
          margin-left: 10px;
        }
        .input_box {
          width: 90%;
        }
      }
    }
  }
}
</style>
